<template>
  <div class="strut-div" :id="config.option.id"><!-- <div  ></div> --></div>
</template>

<script>
import echarts from 'echarts';

import '../../../static/china.js'; // 引入中国地图数据
//旅游迁徙图初始化配置
const geoCoordMap = {
  //可以在地图上显示的城市的坐标信息
  铜陵: [117.81154, 30.945515],
  长春: [125.8154, 44.2584],
  长沙: [113.0823, 28.2568],
  贵阳: [106.6992, 26.7682],
  杨凌: [109.1162, 34.2004],
  深圳: [114.5435, 22.5439],
  济南: [117.1582, 36.8701],
  海口: [110.3893, 19.8516],
  沈阳: [123.1238, 42.1216],
  武汉: [114.3896, 30.6628],
  红安: [114.23, 31.1],
  昆明: [102.9199, 25.4663],
  杭州: [119.5313, 29.8773],
  成都: [103.9526, 30.7617],
  拉萨: [91.1865, 30.1465],
  天津: [117.4219, 39.4189],
  太谷: [112.551357, 37.421308],
  呼和浩特: [111.4124, 40.4901],
  哈尔滨: [127.9688, 45.368],
  北京: [116.4551, 40.2539],
  南京: [118.8062, 31.9208],
  南宁: [108.479, 23.1152],
  南昌: [116.0046, 28.6633],
  乌鲁木齐: [87.9236, 43.5883],
  上海: [121.4648, 31.2891],
  三亚: [109.5, 18.2]
};
const HFData = [
  // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，太谷到各地区的线路
  [{ name: '太谷' }, { name: '长春', value: 66 }],
  [{ name: '太谷' }, { name: '长沙', value: 66 }],
  [{ name: '太谷' }, { name: '贵阳', value: 66 }],
  [{ name: '太谷' }, { name: '杨凌', value: 66 }],
  [{ name: '太谷' }, { name: '深圳', value: 66 }],
  [{ name: '太谷' }, { name: '济南', value: 66 }],
  [{ name: '太谷' }, { name: '海口', value: 66 }],
  [{ name: '太谷' }, { name: '沈阳', value: 66 }],
  [{ name: '太谷' }, { name: '武汉', value: 66 }],
  [{ name: '太谷' }, { name: '昆明', value: 66 }],
  [{ name: '太谷' }, { name: '太谷', value: 118 }],
  [{ name: '太谷' }, { name: '杭州', value: 66 }],
  [{ name: '太谷' }, { name: '成都', value: 66 }],
  [{ name: '太谷' }, { name: '拉萨', value: 66 }],
  [{ name: '太谷' }, { name: '天津', value: 66 }],
  [{ name: '太谷' }, { name: '呼和浩特', value: 66 }],
  [{ name: '太谷' }, { name: '哈尔滨', value: 66 }],
  [{ name: '太谷' }, { name: '北京', value: 66 }],
  [{ name: '太谷' }, { name: '南宁', value: 66 }],
  [{ name: '太谷' }, { name: '南昌', value: 66 }],
  [{ name: '太谷' }, { name: '乌鲁木齐', value: 66 }],
  [{ name: '太谷' }, { name: '上海', value: 66 }]
];
var planePath = 'arrow'; // 箭头的svg
// push进去线路开始-结束地点-经纬度
var convertData = function(data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];
    var fromCoord = geoCoordMap[dataItem[1].name];
    var toCoord = geoCoordMap[dataItem[0].name];
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: toCoord
        },
        {
          coord: fromCoord
        }
      ]);
    }
  }
  return res;
};
const color = ['#555', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
// 数据
var series = [];
// 遍历由太谷到其他城市的线路
[['太谷', HFData]].forEach(function(item, i) {
  // 配置
  series.push(
    {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 5, //箭头指向速度，值越小速度越快
          trailLength: 0.11, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5 //图标大小
        },
        lineStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#58B3CC'
            }, {
              offset: 1,
              color: '#F58158'
            }], false),
            width: 1,
            opacity: 0.1,
            curveness: 0.1
          }
        },

        data: convertData(item[1]),
        tooltip: {
          show: false
        }
      },
    {
      // 目的地信息
      name: item[0],
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        brushType: 'stroke'
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: '{b}',
          color: "#ffffff",
        }
      },
      symbolSize: function(val) {
        return val[2] / 8;
      },
      itemStyle: {
        normal: {
          color: '#77F7E7'
        }
      },
      data: item[1].map(function(dataItem) {
        return {
          name: dataItem[1].name,
          value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
          label: dataItem[1].name == '太谷' ? {fontSize:22} : {},
        };
      })
    }
  );
});

export default {
  name: 'CommonMigrationChart',
  props: ['config'],
  data() {
    return {
      chart: null
    };
  },
  methods: {
    initChart() {
      let option = {
        geo: {
          map: 'china',
          roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

          zoom: '',
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#00a0c9'
              }
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: false,
              textStyle: {
                color: '#00a0c9'
              }
            }
          },

          aspectScale: 0.9,

          layoutCenter: ['50%', '50%'], //地图位置
          layoutSize: '155%',
          itemStyle: {
            normal: {
              areaColor: 'rgba(1, 108, 143, 1)',
              borderColor: '#8F98A6'
            },
            emphasis: {
              borderWidth: 0,
              borderColor: '#0066ba',
              areaColor: '#0494e1',
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: series
      };
      this.chart = echarts.init(document.getElementById(this.config.option.id));
      this.chart.setOption(option);
      // setTimeout(() => {
      //
      // }, 100);
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss" type="text/scss">
.centerItem {
  height: 100%;
  width: 100%;
}
</style>
